<!-- 数据表格分页组件 -->
<script setup>
import {computed} from "vue";

const prevText = '上一页'
const nextText = '下一页'
const props = defineProps([
    'pageInfo'
])

const emit = defineEmits([
    'pagesEvent'
])

const displayInfo = computed(() => {
    if (!props.pageInfo) return '数据加载中，请稍候...'
    const startNum = (props.pageInfo.current - 1) * props.pageInfo.size + 1
    const endNum = Math.min(
        props.pageInfo.current * props.pageInfo.size, props.pageInfo.total
    )
    return {startNum, endNum}
})

const handleChange = (currentPage, pageSize) => {
    emit('pagesEvent', currentPage, pageSize)
}

</script>

<template>
    <div class="pagination-bar">
        <div class="pagination-info" v-if="pageInfo">
            显示第 {{ displayInfo.startNum }} 到第 {{ displayInfo.endNum }} 条记录，总共
            {{ pageInfo.total }} 条记录
            <!--      <el-select></el-select>-->
        </div>
        <el-pagination
            v-model:page-size="pageInfo.size"
            v-model:current-page="pageInfo.current"
            :prev-text="prevText"
            :next-text="nextText"
            :pager-count="5"
            :background="true"
            layout="prev, pager, next"
            :total="pageInfo.total"
            @change="handleChange"
        />
    </div>
</template>

<style scoped lang="scss">
.pagination-bar {
    display: flex;
    align-content: center;
    justify-content: space-between;

    .pagination-info {
        font-size: 14px;
        color: #606266;
        padding-top: 6px;
    }
}
</style>
